import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:travel/components/homepage/other.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class OtherController extends GetxController with GetTickerProviderStateMixin {
  RxDouble top = RxDouble(0);

  RxBool isFollow = RxBool(false);

  late TabController tabController;

  RxList<String> tabs = RxList(['文章', '视频']);

  @override
  void onInit() {
    top.value = Get.mediaQuery.padding.top;
    tabController = TabController(length: tabs.length, vsync: this);
    super.onInit();
  }

  @override
  void onClose() {
    tabController.dispose();
    super.onClose();
  }
}

class OtherView extends GetView<OtherController> {
  const OtherView({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      shadowColor: Colors.transparent,
      surfaceTintColor: Colors.transparent,
      child: buildAnnotatedRegion(context)
    );
  }

  Widget buildAnnotatedRegion(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Container(
        height: Get.height,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [ColorsUtils.rgba(74, 77, 117, 1), ColorsUtils.rgba(112, 114, 128, 1)],
              stops: const [0, 1.0],
              transform: GradientRotation(RadianUtils.angleToRadian(180))),
        ),
        child: buildNestedScrollView(context),
      ),
    );
  }

  Widget buildNestedScrollView(BuildContext context) {
    return DefaultTabController(
      length: controller.tabs.length,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverPersistentHeader(
              delegate: _SliverPersistentHeaderDelegate2(
                  collapsedHeight: 44.0,
                  paddingTop: controller.top.value,
                  child: Container(
                    padding: EdgeInsets.only(top: controller.top.value),
                    child: Container(
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.only(left: 15.w, right: 15.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          InkWell(
                              onTap: Get.back,
                              child: Icon(Icons.arrow_back_ios, size: 20.w, color: Colors.white)),
                          Wrap(
                            spacing: 20.w,
                            children: [
                              InkWell(
                                  onTap: () {
                                    Get.toNamed(RoutePath.homepageOtherSearch);
                                  },
                                  child: ToolsUtils.assetImageSvg('u253.svg',
                                      width: 18.w, height: 18.h)),
                              InkWell(
                                  onTap: () {
                                    ToolsUtils.openShare(context);
                                  },
                                  child: ToolsUtils.assetImageSvg('u2611.svg',
                                      width: 18.w, height: 20.h)),
                            ],
                          )
                        ],
                      ),
                    ),
                  )),
              pinned: true,
            ),
            SliverToBoxAdapter(
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
                    child: Row(
                      children: [
                        CircleAvatar(
                          radius: 40.w,
                          backgroundColor: Colors.white,
                          child: CircleAvatar(
                            radius: 38.w,
                            backgroundImage: const NetworkImage(
                                'https://img0.baidu.com/it/u=2382015383,1174241249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
                          ),
                        ),
                        Expanded(
                            child: Container(
                          padding: EdgeInsets.only(left: 15.w),
                          child: Column(
                            children: [
                              Container(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  '北京大表姐儿',
                                  style: StylesUtils.customTextStyle(
                                    fontSize: 20.sp,
                                  ),
                                ),
                              ),
                              Container(
                                alignment: Alignment.topLeft,
                                margin: EdgeInsets.only(top: 12.h, bottom: 6.h),
                                child: Text(
                                  'UID：9613007301',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 12.sp, color: ColorsUtils.colorCccc),
                                ),
                              ),
                              Container(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  'IP属地：北京',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 12.sp, color: ColorsUtils.colorCccc),
                                ),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    child: TextButton(
                        onPressed: () {
                          // Get.toNamed(RoutePath.settingInfoSign);
                        },
                        child: Text(
                          '承蒙厚爱，感谢喜欢',
                          style: StylesUtils.customTextStyle(
                              fontSize: 13.sp, color: ColorsUtils.colorF2f2),
                        )),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 15.w),
                    alignment: Alignment.centerLeft,
                    child: Wrap(
                      spacing: 5.w,
                      children: [
                        Container(
                          alignment: Alignment.center,
                          constraints: BoxConstraints.expand(width: 35.w, height: 20.h),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(215, 215, 215, 0.247058823529412),
                              borderRadius: BorderRadius.circular(10.h)),
                          child: Text(
                            'Lv.1',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorEa8e, fontSize: 12.sp),
                          ),
                        ),
                        Container(
                          alignment: Alignment.center,
                          constraints: BoxConstraints.expand(width: 40.w, height: 20.h),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(215, 215, 215, 0.247058823529412),
                              borderRadius: BorderRadius.circular(10.h)),
                          child: Text.rich(TextSpan(children: [
                            WidgetSpan(
                                child: ToolsUtils.assetImageSvg('u2609.svg',
                                    width: 12.w, height: 12.h),
                                alignment: PlaceholderAlignment.middle),
                            TextSpan(
                                text: ' 女',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.colorEc80, fontSize: 12.sp))
                          ])),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: 15.h, bottom: 10.h),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                            child: Row(
                          children: [
                            InkWell(
                              onTap: () {
                                Get.toNamed(RoutePath.follow, arguments: {'index': 0});
                              },
                              child: SizedBox(
                                width: 60.w,
                                child: Column(
                                  children: [
                                    Container(
                                      height: 20.h,
                                      alignment: Alignment.center,
                                      child: Text(
                                        '23',
                                        style: StylesUtils.customTextStyle(fontSize: 15.sp),
                                      ),
                                    ),
                                    Container(
                                      height: 25.h,
                                      margin: EdgeInsets.only(top: 2.h),
                                      alignment: Alignment.center,
                                      child: Text(
                                        '关注',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                            InkWell(
                                onTap: () {
                                  Get.toNamed(RoutePath.follow, arguments: {'index': 1});
                                },
                                child: SizedBox(
                                  width: 60.w,
                                  child: Column(
                                    children: [
                                      Container(
                                        height: 20.h,
                                        alignment: Alignment.center,
                                        child: Text(
                                          '1.2万',
                                          style: StylesUtils.customTextStyle(fontSize: 15.sp),
                                        ),
                                      ),
                                      Container(
                                        height: 25.h,
                                        margin: EdgeInsets.only(top: 2.h),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '粉丝',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                                        ),
                                      )
                                    ],
                                  ),
                                )),
                            SizedBox(
                              width: 60.w,
                              child: Column(
                                children: [
                                  Container(
                                    height: 20.h,
                                    alignment: Alignment.center,
                                    child: Text(
                                      '60.1万',
                                      style: StylesUtils.customTextStyle(fontSize: 15.sp),
                                    ),
                                  ),
                                  Container(
                                    height: 25.h,
                                    margin: EdgeInsets.only(top: 2.h),
                                    alignment: Alignment.center,
                                    child: Text(
                                      '获赞',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        )),
                        Container(
                          padding: EdgeInsets.only(right: 8.w),
                          alignment: Alignment.center,
                          child: Obx(() => Container(
                                constraints: BoxConstraints.expand(width: 80.w, height: 30.h),
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                  color: controller.isFollow.isFalse
                                      ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf52)
                                      : ColorsUtils.rgba(170, 170, 170, 0.6),
                                  borderRadius: BorderRadius.circular(15.h),
                                ),
                                child: TextButton(
                                    onPressed: () {
                                      controller.isFollow.value = !controller.isFollow.value;
                                    },
                                    child: Text(
                                      controller.isFollow.isTrue ? '已关注' : '关注',
                                      style: activeStyle,
                                    )),
                              )),
                        ),
                        InkWell(onTap: () {
                          Get.toNamed(RoutePath.messageLetter);
                        }, child: Container(
                          margin: EdgeInsets.only(right: 15.w),
                          constraints: BoxConstraints.expand(width: 40.w, height: 30.h),
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(170, 170, 170, 0.6),
                              borderRadius: BorderRadius.circular(15.h)),
                          child: ToolsUtils.assetImageSvg('u2612.svg', width: 18.w, height: 15.h),
                        ),)
                      ],
                    ),
                  ),
                ],
              ),
            ),
            SliverPersistentHeader(
                delegate: _SliverPersistentHeaderDelegate(
                    collapsedHeight: 50.0,
                    paddingTop: 0.0,
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(15.w), topRight: Radius.circular(15.w))),
                      alignment: Alignment.center,
                      child: Container(
                        constraints: BoxConstraints.expand(width: 190.w),
                        child: ToolsUtils.getClientTabBar(controller.tabs, controller.tabController,
                            isScrollable: false),
                      ),
                    )),
                pinned: true),
          ];
        },
        body: TabBarView(
          controller: controller.tabController,
          children: const [OtherArticle(), OtherVideo()],
        ),
      ),
    );
  }

  TextStyle get activeStyle {
    if (controller.isFollow.isTrue) {
      return StylesUtils.textStyle(color: ColorsUtils.rgba(255, 255, 255, 0.6), fontSize: 13.sp);
    }
    return StylesUtils.customTextStyle(color: ColorsUtils.colorFfff, fontSize: 13.sp);
  }
}

class _SliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double collapsedHeight;
  final double paddingTop;
  final Widget child;

  _SliverPersistentHeaderDelegate(
      {required this.collapsedHeight, required this.paddingTop, required this.child});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => minExtent;

  @override
  double get minExtent => collapsedHeight + paddingTop;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return this != oldDelegate;
  }
}

class _SliverPersistentHeaderDelegate2 extends SliverPersistentHeaderDelegate {
  final double collapsedHeight;
  final double paddingTop;
  final Widget child;

  _SliverPersistentHeaderDelegate2(
      {required this.collapsedHeight, required this.paddingTop, required this.child});

  Color makeStickyHeaderBgColor(shrinkOffset) {
    final double alpha = (shrinkOffset / minExtent);
    return Color.fromRGBO(112, 114, 128, alpha);
  }

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: makeStickyHeaderBgColor(shrinkOffset),
      child: child,
    );
  }

  @override
  double get maxExtent => minExtent;

  @override
  double get minExtent => collapsedHeight + paddingTop;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return this != oldDelegate;
  }
}
